<template>
    <div>
        <ls-dialog
            title="接口配置"
            width="600px"
            top="30vh"
            ref="dialog"
            :async="true"
            @confirm="handleConfirm"
            @cancel="closeDialog"
        >
            <div class="p-l-20 p-r-20">
                <el-form ref="form" :model="form" label-width="120px" size="small">
                    <el-form-item label="99Api apiKey">
                        <el-input
                            style="width: 380px"
                            v-model="form.key_99api"
                            placeholder="复制商品第三方平台接口秘钥"
                        ></el-input>
                        <div class="xs muted">
                            请填写99Api apiKey，如果无，请前往：
                            <el-link href="https://www.99api.com" target="_blank" type="primary" :underline="false">
                                https://www.99api.com
                            </el-link>
                            申请
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </ls-dialog>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import LsDialog from '@/components/ls-dialog.vue'
import { apiSetGatherKey } from '@/api/application/goods_collection'
@Component({
    components: {
        LsDialog
    }
})
export default class GoodsCollectionConfig extends Vue {
    form = {
        key_99api: ''
    }
    $refs!: { dialog: any }
    @Watch('value')
    closeDialog() {
        this.$refs.dialog.close()
    }
    openDialog(key_99api: string) {
        this.form.key_99api = key_99api
        this.$refs.dialog.open()
    }

    handleConfirm() {
        apiSetGatherKey({
            key_99api: this.form.key_99api
        })
            .then(() => {
                this.closeDialog()
                this.$emit('getGatherKey')
            })
            .finally(() => {
                this.form.key_99api = ''
            })
    }
}
</script>

<style lang="scss" scoped></style>
